<!-- For help on using this template, see the blog post: https://blog.mturk.com/editing-the-survey-link-project-template-in-the-ui-7c75285105fb#.py7towsdx --><!-- HIT template: SurveyLink-v3.0 --><!-- The following snippet enables the 'responsive' behavior on smaller screens -->
<meta content="width=device-width,initial-scale=1" name="viewport" /><!-- Actual Content to show after accepting the hit-->
<div id="hit-container" style="display: none;">
<div id="hit-instruction">
<div class="panel panel-primary">
<div class="panel-body" id="instructionBody">
<h3><b>Attention</b></h3>

<p>Some of these choices will be very clear, but others will require you to use your best judgment. We undrstand that in many cases it will be hard to tell what the "right" choice is. Use your best judgement, but please be attentive. <b>We have randomly mixed in a number of gold-standard HITs whose answers are less ambiguous to evaluate the quality of your work.</b> If you miss a large number of gold-standard HITs, you may be <b>blocked</b> from continued participation in this study (and future studies).</p>

<p>After you've done a relatively large number of HITs of a specific task structure, your qualification might be temporarily surpressed. This does not mean you've done anything wrong, but we need to ensure that a variety of workers complete our tasks. This is <b>NOT a block</b> and will have <b>NO negative impact</b> on you Mturk record.</p>

<h3><b>Instructions</b></h3>

<p>For each HIT, you will see <b>one short passage</b> and <b>four</b> labels. Three of the labels will be related to the passage, but <b>the other one will be out of place</b>. Your job is to pick up the one label that seems <b>LEAST</b> related to the passage.</p>

<h3><b>Background</b></h3>

<p>The passages and words you see are taken from U.S. senators' official Facebook postings. These postings can be on any issue or topic. Some postings are about certain legislation, some are about federal or statewide events, and some are about the administration, etc.</p>

</div>
</div>
</div>

<div id="SurveyLink"><!-- Instructions -->
<div id="workContent">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary"><!-- WARNING: the ids "collapseTrigger" and "instructionBody" are being used to enable expand/collapse feature -->
<div class="panel-heading"><b>Please read the paraghraph below and answer the following question&nbsp;</b>​</div>

<div class="panel-body">
<p id="instructions">${passage}</p>
</div>
</div>
</div>
</div>

<p><strong>Please read the four labels below and click on the label that is most UNRELATED to the passage.</strong></p>

<div class="radio"><label><input name="radio" type="radio" id="radio1" value="1"/>${word1}</label></div>

<div class="radio"><label><input name="radio" type="radio" id="radio2" value="2"/>${word2}</label></div>

<div class="radio"><label><input name="radio" type="radio" id="radio3" value="3"/>${word3}</label></div>

<div class="radio"><label><input name="radio" type="radio" id="radio4" value="4"/>${word4}</label></div>
</div>
</div>
</div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384-IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" /><!-- Preview Content -->
<div id="preview" style="display: none;">
<div id="hit-instruction">
<div class="panel panel-primary">
<div class="panel-body" id="instructionBody">
<h3><b>Attention</b></h3>

<p>Some of these choices will be very clear, but others will require you to use your best judgment. We undrstand that in many cases it will be hard to tell what the "right" choice is. Use your best judgement, but please be attentive. <b>We have randomly mixed in a number of gold-standard HITs whose answers are less ambiguous to evaluate the quality of your work.</b> If you miss a large number of gold-standard HITs, you may be <b>blocked</b> from continued participation in this study (and future studies).</p>

<p>After you've done a relatively large number of HITs of a specific task structure, your qualification might be temporarily surpressed. This does not mean you've done anything wrong, but we need to ensure that a variety of workers complete our tasks. This is <b>NOT a block</b> and will have <b>NO negative impact</b> on you Mturk record.</p>

<h3><b>Instructions</b></h3>

<p>For each HIT, you will see <b>one short passage</b> and <b>four</b> labels. Three of the labels will be related to the passage, but <b>the other one will be out of place</b>. Your job is to pick up the one label that seems <b>LEAST</b> related to the passage.</p>

<h3><b>Background</b></h3>

<p>The passages and words you see are taken from U.S. senators' official Facebook postings. These postings can be on any issue or topic. Some postings are about certain legislation, some are about federal or statewide events, and some are about the administration, etc.</p>
</div>
</div>
</div>

<div id="SurveyLink"><!-- Instructions -->
<div id="workContent">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary"><!-- WARNING: the ids "collapseTrigger" and "instructionBody" are being used to enable expand/collapse feature -->
<div class="panel-heading"><b>Please read the paraghraph below and answer the following question&nbsp;</b></div>

<div class="panel-body">
<p id="instructions">Please accept the HIT to see the actual paragraph</p>
</div>
</div>
</div>
</div>

<p><strong>Please read the four labels below and click on the label that is most UNRELATED to the passage.</strong></p>

<div class="radio"><label><input name="radio" type="radio" id = "radio1" value="1"/>Option 1</label></div>

<div class="radio"><label><input name="radio" type="radio" id = "radio2" value="2"/>Option 2</label></div>

<div class="radio"><label><input name="radio" type="radio" id = "radio3" value="3"/>Option 3</label></div>

<div class="radio"><label><input name="radio" type="radio" id = "radio4" value="4"/>Option 4</label></div>
</div>
</div>
</div>
<style type="text/css">#submitButton {
    white-space: normal;
  }

  .image {
    margin-bottom: 15px;
  }

  .panel-primary {
    margin: 10px;
  }

  /* CSS for breaking long words/urls */
  .dont-break-out {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  #hit-container {
    display: none;
  }

  #hit-instruction,
  #SurveyLink {
    display: inline-flex;
    vertical-align: top;
  }

  #hit-instruction {
    width: 20%;
  }

  #SurveyLink {
    width: 55%;
  }
</style>
<!-- Close internal style sheet --><!-- External JS references --><script src="https://code.jquery.com/jquery-3.1.0.min.js"
  integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"
  integrity="sha384-s1ITto93iSMDxlp/79qhWHi+LsIi9Gx6yL+cOKDuymvihkfol83TYbLbOw+W/wv4" crossorigin="anonymous"></script><!-- Open internal javascript --><script></script>
<p>&nbsp;</p>
<script>

  var assignmentIdInPreviewMode = 'ASSIGNMENT_ID_NOT_AVAILABLE';

  function getAssignmentId() {
    return getParam("assignmentId");
  }

  function getParam(param) {
    var searchingParam = document.location.search;
    searchingParam = searchingParam.substr(searchingParam.indexOf(param) + param.length + 1).split('&')[0];
    return searchingParam || assignmentIdInPreviewMode;
  }

  document.addEventListener('DOMContentLoaded', function () {

    // To show preview
    if (getAssignmentId() === assignmentIdInPreviewMode) {
      document.getElementById('preview').style.display = 'block';
    } else {
      document.getElementById('hit-container').style.display = 'block';
    }

    // To make instructions scrollable
    var instructionsContainer = document.getElementById('instructions');
    if (instructionsContainer.clientHeight > 200) {
      instructionsContainer.style.height = '200px';
      instructionsContainer.style.overflowY = 'scroll';
    }

    // To make left instrunctions scrollable
    var leftInstructionContainer = document.getElementById('instructionBody');
    if (leftInstructionContainer.clientHeight > 600) {
      leftInstructionContainer.style.height = '600px';
      leftInstructionContainer.style.overflowY = 'scroll';
    }

  }, false);

</script>
